<template>
  <el-input-number
    v-model="searchValue"
    :placeholder="
      config.placeholder
        ? config.placeholder
        : t('component.search.input_placeholder') + ' ' + config.label
    "
    :min="config.min !== undefined ? config.min : undefined"
    :max="config.max !== undefined ? config.max : undefined"
    :step="config.step || 1"
    :precision="config.precision || 0"
    :readonly="config.readonly"
    :disabled="config.disabled"
    :size="config.size || 'default'"
    :controls-position="'right'"
    :clearable="config.clearable !== false"
    @focus="config.onFocus"
    :class="'searchNumberClass'"
  ></el-input-number>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps(["model", "config"]);
const emit = defineEmits(["update"]);
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const searchValue = computed({
  get() {
    return props.model;
  },
  set(value) {
    emit("update", props.config, value);
  },
});
</script>

<style lang="less">

.searchNumberClass.el-input-number.is-controls-right .el-input__wrapper {
    padding-left: 11px !important;
    padding-right: 42px;
}
.searchNumberClass.el-input-number .el-input__inner {
    text-align: left;
}

</style>